<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>

<body>
    <input type="hidden" th:value="${cid}" id="cid" name="cid">
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2">
            <div class="layui-carousel" id="GoodsCarousel" lay-filter="GoodsCarousel">
                <div carousel-item="">
                    <div><a th:href="@{/page/userIndex/goodDetail/1}"><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><a th:href="@{/page/userIndex/goodDetail/1}"><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><a th:href="@{/page/userIndex/goodDetail/1}"><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><a th:href="@{/page/userIndex/goodDetail/1}"><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><a th:href="@{/page/userIndex/goodDetail/1}"><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><a th:href="@{/page/userIndex/goodDetail/1}"><img th:src="@{/img/s.jpg}" /></a></div>
                    <div><a th:href="@{/page/userIndex/goodDetail/1}"><img th:src="@{/img/s.jpg}" /></a></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row" id="goods" name="goods">
        <div class="layui-col-md2" id="goods1" >
        </div>
    </div>





<script>
    var $;
    layui.use(['element','jquery','carousel'],function(){
        var elem = layui.element,carousel = layui.carousel;
        $ = layui.jquery;

        getGoods();



        carousel.render({
            elem:'#GoodsCarousel',
            width:'100%',//设置容器宽度
            arrow:'always',//显示箭头
        })


    })

    function getGoods() {
        var cid = $('#cid').val();
        $.ajax({
            type:'post',
            url:'/goods/gc/find',
            data:{
                categoryId:cid
            },
            dataType:'json',
            success:function (result) {
                $('#goods').empty();
                $.each(result.data,function (i,data) {
                    var goods = '<div class="layui-col-md2" id="goods'+data.id+'" style="height: 300px;border: solid 2px;border-color: #5cb7e7">\n' +
                        '            <a href="/page/userIndex/goodDetail/'+data.id+'">\n' +
                        '                <img src="/file/fc/showImg/'+data.picUrl+'">'+data.brief+'\n' +
                        '            </a>\n' +
                        '        </div>'
                    $('#goods').append(goods);
                })
            }
        })
    }


</script>
</body>
</html>
